react native [React] useEffect vs useLayoutEffect useEffect hook만 사용하다 useLayoutEffect hook을 알게되어 차이점을 기록하려한다. 두 hook은 화면이 렌더링될 때 실행된다는 점에서는 동일하다. 그러나 약간의 차이점이 존재한다. 1) useEffect 화면이 레이아웃과 배치가 끝난 이후 실행된다. 아래의 코드를 살펴보자 위의 코드는 화면이 렌더링 될때 count state를 25로 변경해준 후 렌더링 할 것이다.... Reactreact nativeReact React Native 에 SVG Icon 컴포넌트 작성 하지만 React Native 에서는 기본적으로 SVG 파일을 지원하지 않는다. 그럼 React Native 에서 SVG 파일을 아이콘으로 사용할 수 있도록 설정 및 구현해보자. 는 React Native 프로젝트에서 SVG 및 관련 엘리먼트들을 웹과 유사한 형식으로 사용할 수 있게 해주는 라이브러리다. react-native-svg 는 <Svg />, <G />, <Path /> 등 거의 ... react-native-svgreact-native-svg-transformer아이콘iconreact nativesvgicon [React] axios 와 fetch 차이점 -> 개인적인 생각으로는 사용법이 살짝 다르지만, 전체적으로 비슷한데, axios 가 좀 더 사용자가 인지하기 쉽게? fetch 에는 존재하지 않는 기능이 좀 더 많다. React Native 의 경우에 업데이트가 잦기 때문에, 라이브러리(예를들면, axios 같은 것들..)이 이 업데이트를 쫓아오지 못하는 경우가 생기는데, Fetch 는 이걸 걱정할 필요 없이 사용 가능 Axios JSON... Reactreact nativeFetchaxiosFetch [RA] React Native - 로그인예제1 (+이슈리스트) React Native + node.js 로그인 예제 실행과정과 진행현황 등을 기록한 글입니다. 노드 서버 설정 cmd를 켜고 위 명령어를 입력해 서버를 설정한다. 개발환경 구축 cmd를 켜고 위 명령어를 입력해 개발환경을 구축한다. 디렉토리와 파일구조 생성 프로젝트의 구조는 위 이미지처럼 되어있어야한다. 안드로이드 스튜디오 설정 Tools -> SDK Manager -> SDK Platfo... react nativereact native [React Native] PhaseScriptExecution error (in target 'FBReactNativeSpec' from project 'Pods') PhaseScriptExecution [CP-User]\ Generate\ Specs /Users/사용자/Library/Developer/Xcode/DerivedData/project-cawbghttjvsyffdmgdqopcavjwgr/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Scr... react native errorreact nativereact native [React-Native] TypeError: Cannot read property 'transformFile' of undefined react-native을 처음으로 설치해봤습니다. 시뮬레이터를 돌려봅니다. simulator는 정상적으로 뜨는데, build에러가 발생했습니다. transformer가 undefined라는 error입니다. 해결방법을 찾아봅니다. npm 버전을 낮추라 현재 Latest version은 17.xx.xx 입니다. 이걸 낮추라는 의견(LTS로 낮추라는 의견)이 많았습니다. v14.18.1 로 낮추... react nativereact native [RA] React Native - 로그인예제 2 (+이슈리스트) React Native + node.js + Mysql 로그인 예제 실행과정과 진행현황 등을 기록한 글입니다. MySQL 환경 구축 Node.js 백엔드 서버 실행 그 후 app.js의 아래부분을 자신의 환경에 맞게 수정해준다. app.js를 저장해준 뒤 cmd창에서 아래 명령어를 입력해 Node.js서버를 실행시켜 준다. node app 리액트 프론트 실행 리액트 네이티브 실행 ❗ node... react nativereact native react-native와 Rest API 통신하기 이번 편은 react와 rest api 통신을 다룬 포스트( )의 글을 참고했습니다 (감사합니다) What is Rest API ? Representational State Transfer API 의 약자로, 자원을 이름으로 구분하여 자원의 상태(정보)를 주고 받는 모든 것을 의미한다. 다시 한 번 정리하자면, HTTP URI 를 통해 자원을 명시하고 HTTP Method(POST, GET,... axiosREST APIreact nativeREST API [React-Native] Text strings must be rendered within a <Text> components (빈문자열에 대한 에러) 위와 같이 error의 초기값이 ''이면 string type이기 때문에 Render Error가 발생합니다. 따라서 error 초기값을 string이 아닌 boolean(false)으로 바꿔주면 해결됩니다.... react nativereact native [React Native] 시작하기 React Native 개발환경 React Native CLI 준비 : Xcode(iOS) 또는 Android Studio(windows) Expo CLI의 많은 이슈로 React Native CLI을 사용할 예정 1. Chocolatey 설치 Chocolatey 설치 확인 - Node.js 설치 및 확인 - jdk8 설치 및 확인 (무조건 jdk8 이상으로 설치하기) windows 사용자로... 리액트 네이티브react nativereact native [RA] React Native - 로그인예제 개발환경 구축 (+모듈 버전) Mysql + node.js + React native 앱 로그인, 회원가입 예제입니다. 개발환경 구축 MYsql node.js에서 데이터를 불러오기 위해 MYsql로 로컬 데이터베이스를 구축한다. Mysql에서 아래 코드를 실행해 RNTest라는 데이터베이스를 만든다. RNTest안에 4개의 테이블을 만든다. myinfo - TabHome MYToday에 있는 심박수, 걸음수 등등의 정보를... react nativereact native React-Native [11. Firebase로 특정 데이터 조회/저장] 한꺼번에 모든 데이터를 가지고 페이지를 이동하는것은 상식적으로 느릴 수 밖에 없다. 이동하는 페이지에 필요한 데이터만 가지고 오는 기능이 필요한 이유! 카드를 클릭하면 기존에는 content 데이터 전부를 넘겨주었었는데, 이를 {idx:content.idx}, 즉 primary key만 넘겨준다. {idx: 클릭한 카드의 idx}를 넘겨받은 DetailPage는, firebase_db를 사용... react nativeFirebaseFirebase
[React] useEffect vs useLayoutEffect useEffect hook만 사용하다 useLayoutEffect hook을 알게되어 차이점을 기록하려한다. 두 hook은 화면이 렌더링될 때 실행된다는 점에서는 동일하다. 그러나 약간의 차이점이 존재한다. 1) useEffect 화면이 레이아웃과 배치가 끝난 이후 실행된다. 아래의 코드를 살펴보자 위의 코드는 화면이 렌더링 될때 count state를 25로 변경해준 후 렌더링 할 것이다.... Reactreact nativeReact React Native 에 SVG Icon 컴포넌트 작성 하지만 React Native 에서는 기본적으로 SVG 파일을 지원하지 않는다. 그럼 React Native 에서 SVG 파일을 아이콘으로 사용할 수 있도록 설정 및 구현해보자. 는 React Native 프로젝트에서 SVG 및 관련 엘리먼트들을 웹과 유사한 형식으로 사용할 수 있게 해주는 라이브러리다. react-native-svg 는 <Svg />, <G />, <Path /> 등 거의 ... react-native-svgreact-native-svg-transformer아이콘iconreact nativesvgicon [React] axios 와 fetch 차이점 -> 개인적인 생각으로는 사용법이 살짝 다르지만, 전체적으로 비슷한데, axios 가 좀 더 사용자가 인지하기 쉽게? fetch 에는 존재하지 않는 기능이 좀 더 많다. React Native 의 경우에 업데이트가 잦기 때문에, 라이브러리(예를들면, axios 같은 것들..)이 이 업데이트를 쫓아오지 못하는 경우가 생기는데, Fetch 는 이걸 걱정할 필요 없이 사용 가능 Axios JSON... Reactreact nativeFetchaxiosFetch [RA] React Native - 로그인예제1 (+이슈리스트) React Native + node.js 로그인 예제 실행과정과 진행현황 등을 기록한 글입니다. 노드 서버 설정 cmd를 켜고 위 명령어를 입력해 서버를 설정한다. 개발환경 구축 cmd를 켜고 위 명령어를 입력해 개발환경을 구축한다. 디렉토리와 파일구조 생성 프로젝트의 구조는 위 이미지처럼 되어있어야한다. 안드로이드 스튜디오 설정 Tools -> SDK Manager -> SDK Platfo... react nativereact native [React Native] PhaseScriptExecution error (in target 'FBReactNativeSpec' from project 'Pods') PhaseScriptExecution [CP-User]\ Generate\ Specs /Users/사용자/Library/Developer/Xcode/DerivedData/project-cawbghttjvsyffdmgdqopcavjwgr/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Scr... react native errorreact nativereact native [React-Native] TypeError: Cannot read property 'transformFile' of undefined react-native을 처음으로 설치해봤습니다. 시뮬레이터를 돌려봅니다. simulator는 정상적으로 뜨는데, build에러가 발생했습니다. transformer가 undefined라는 error입니다. 해결방법을 찾아봅니다. npm 버전을 낮추라 현재 Latest version은 17.xx.xx 입니다. 이걸 낮추라는 의견(LTS로 낮추라는 의견)이 많았습니다. v14.18.1 로 낮추... react nativereact native [RA] React Native - 로그인예제 2 (+이슈리스트) React Native + node.js + Mysql 로그인 예제 실행과정과 진행현황 등을 기록한 글입니다. MySQL 환경 구축 Node.js 백엔드 서버 실행 그 후 app.js의 아래부분을 자신의 환경에 맞게 수정해준다. app.js를 저장해준 뒤 cmd창에서 아래 명령어를 입력해 Node.js서버를 실행시켜 준다. node app 리액트 프론트 실행 리액트 네이티브 실행 ❗ node... react nativereact native react-native와 Rest API 통신하기 이번 편은 react와 rest api 통신을 다룬 포스트( )의 글을 참고했습니다 (감사합니다) What is Rest API ? Representational State Transfer API 의 약자로, 자원을 이름으로 구분하여 자원의 상태(정보)를 주고 받는 모든 것을 의미한다. 다시 한 번 정리하자면, HTTP URI 를 통해 자원을 명시하고 HTTP Method(POST, GET,... axiosREST APIreact nativeREST API [React-Native] Text strings must be rendered within a <Text> components (빈문자열에 대한 에러) 위와 같이 error의 초기값이 ''이면 string type이기 때문에 Render Error가 발생합니다. 따라서 error 초기값을 string이 아닌 boolean(false)으로 바꿔주면 해결됩니다.... react nativereact native [React Native] 시작하기 React Native 개발환경 React Native CLI 준비 : Xcode(iOS) 또는 Android Studio(windows) Expo CLI의 많은 이슈로 React Native CLI을 사용할 예정 1. Chocolatey 설치 Chocolatey 설치 확인 - Node.js 설치 및 확인 - jdk8 설치 및 확인 (무조건 jdk8 이상으로 설치하기) windows 사용자로... 리액트 네이티브react nativereact native [RA] React Native - 로그인예제 개발환경 구축 (+모듈 버전) Mysql + node.js + React native 앱 로그인, 회원가입 예제입니다. 개발환경 구축 MYsql node.js에서 데이터를 불러오기 위해 MYsql로 로컬 데이터베이스를 구축한다. Mysql에서 아래 코드를 실행해 RNTest라는 데이터베이스를 만든다. RNTest안에 4개의 테이블을 만든다. myinfo - TabHome MYToday에 있는 심박수, 걸음수 등등의 정보를... react nativereact native React-Native [11. Firebase로 특정 데이터 조회/저장] 한꺼번에 모든 데이터를 가지고 페이지를 이동하는것은 상식적으로 느릴 수 밖에 없다. 이동하는 페이지에 필요한 데이터만 가지고 오는 기능이 필요한 이유! 카드를 클릭하면 기존에는 content 데이터 전부를 넘겨주었었는데, 이를 {idx:content.idx}, 즉 primary key만 넘겨준다. {idx: 클릭한 카드의 idx}를 넘겨받은 DetailPage는, firebase_db를 사용... react nativeFirebaseFirebase